// 更新本地存储数据
function upDataLocalstorage(data) {
	localStorage.setItem('data',JSON.stringify(data))
}

// 模拟页面中的数据
var data = localStorage.getItem('data') ? JSON.parse(localStorage.getItem('data')) : [
	{id: 1,name:"张三1",number:'GH1001',department:'研发部',position:'产品经理',educationBJ:'本科',educationSchool:'北京大学',major:'管理学',startTime:'2017-09-01',endTime:'2021-06-01',educationType:'全日制',isDegree:'是'},
	{id: 2,name:"张三2",number:'GH1002',department:'研发部',position:'产品经理',educationBJ:'本科',educationSchool:'清华大学',major:'心理学',startTime:'2017-09-01',endTime:'2021-06-01',educationType:'全日制',isDegree:'是'},
	{id: 3,name:"张三3",number:'GH1003',department:'研发部',position:'产品经理',educationBJ:'本科',educationSchool:'成都大学',major:'社会学',startTime:'2017-09-01',endTime:'2021-06-01',educationType:'全日制',isDegree:'是'},
	{id: 4,name:"张三4",number:'GH1004',department:'研发部',position:'产品经理',educationBJ:'本科',educationSchool:'清华大学',major:'管理学',startTime:'2017-09-01',endTime:'2021-06-01',educationType:'全日制',isDegree:'是'},
	{id: 5,name:"张三5",number:'GH1005',department:'研发部',position:'产品经理',educationBJ:'本科',educationSchool:'清华大学',major:'管理学',startTime:'2017-09-01',endTime:'2021-06-01',educationType:'全日制',isDegree:'是'},
	{id: 6,name:"张三6",number:'GH1006',department:'研发部',position:'产品经理',educationBJ:'本科',educationSchool:'清华大学',major:'管理学',startTime:'2017-09-01',endTime:'2021-06-01',educationType:'全日制',isDegree:'是'},
	{id: 7,name:"张三7",number:'GH1007',department:'研发部',position:'产品经理',educationBJ:'本科',educationSchool:'清华大学',major:'管理学',startTime:'2017-09-01',endTime:'2021-06-01',educationType:'全日制',isDegree:'是'},
]

upDataLocalstorage(data);
// 当前页码
var page = 1;
// 每页的条数
var count = 5;
// 获取body
var oTbody = document.querySelector('tbody');
// 获取分页容器
var oPageContain = document.querySelector('.pagination');
// 获取上一页的按钮
var oPreBtn = document.querySelector('.prev');
// 获取下一页的按钮
var oNextBtn = document.querySelector('.next');
// 获取搜索的输入框
var oSearchInp1 = document.querySelector('#name1')
var oSearchInp2 = document.querySelector('#name2')
var oSearchInp3 = document.querySelector('#name3')
var oSearchInp4 = document.querySelector('#name4')
var oSearchInp5 = document.querySelector('#name5')
var oSearchInp6 = document.querySelector('#name6')
var oSearchInp7 = document.querySelector('#name7')
// 获取新增的按钮
var addBtn = document.querySelector('.add');
// 获取多选删除的按钮
var delSelect = document.querySelector('.delSelect');
// 获取搜索的按钮
var searchBtn = document.querySelector('.lookAll');
// 获取编辑的按钮
var editBtn = document.querySelector('.edit');
// 获取单选删除的按钮
var delBtn = document.querySelector('.del');
// 全选checkbox
var selectAll = document.querySelector('.select-all input')
// 单选框
var singleSelected = document.getElementsByClassName('singleSelect')
// 存放当前选中的数据id
var selectedList = [];

// 全选
selectAll.onclick = function () {
	if(selectAll.checked) {
		for(var i = 0; i < singleSelected.length; i++){
			singleSelected[i].checked = true;
		}
		data.map(function (item){
			selectedList.push(item.id)// 将被选中的数组id放在一个数组中，方便后面多选删除
		})
	}else {
		for(var i = 0; i < singleSelected.length; i++) {
			singleSelected[i].checked = false;
		}
		selectedList = [];
	}
}
// 单选
$(document).ready(function (){// 页面节点未加载出来，获取不到节点所以加$(document).ready(function (){})
	for(var j = 0; j < singleSelected.length; j++){
		singleSelected[j].onclick = function () {
			for(var x = 0; x < singleSelected.length; x++) {
				// 只要有一个没有被选中，则全选应该取消，否则全选应该自动选中
				if(!singleSelected[x].checked) {
					selectAll.checked = false;
					break;
				}
				selectAll.checked = true
			}
		}
	}
})
// 点了又取消
function handleChange(checked,id){// 单选框发生改变触发的函数
	if (checked){
		selectedList.push(id);
	}else {
		selectedList = selectedList.filter(function (value){
			return  value !== id;// 获取除了取消剩下的数据
		})
	}
}

// 页面初始化的渲染功能
function render() {
		// 查看搜索框的内容、条件
		var str1 = oSearchInp1.value;
		var str2 = oSearchInp2.value;
		var str3 = oSearchInp3.value;
		var str4 = oSearchInp4.value;
		var str5 = oSearchInp5.value;
		var str6 = oSearchInp6.value;
		var str7 = oSearchInp7.value;
		var searchDate = [];
		var data1 = [];
		var data2 = [];
		var data3 = [];
		var data4 = [];
		var data5 = [];
		var data6 = [];

		if(str1.trim() === ''){
			data1 = data;
		}else {
			data1 = data.filter(function (v){
				return v.name.includes(str1)
			})
		}

		if(str2.trim() === ''){
			data2 = data1;
		}else {
			data2 = data1.filter(function (v){
				return v.number.includes(str2)
			})
		}

		if(str3.trim() === ''){
			data3 = data2;
		}else {
			data3 = data2.filter(function (v){
				return v.department.includes(str3)
			})
		}

		if(str4.trim() === ''){
			data4 = data3;
		}else {
			data4 = data3.filter(function (v){
				return v.position.includes(str4)
			})
		}
		if(str5.trim() === ''){
			data5 = data4;
		}else {
			data5 = data4.filter(function (v){
				return v.educationBJ.includes(str5)
			})
		}
		if(str6.trim() === ''){
			data6 = data5;
		}else {
			data6 = data5.filter(function (v){
				return v.educationSchool.includes(str6)
			})
		}
		if(str7.trim() === ''){
			searchDate = data6;
		}else {
			searchDate = data6.filter(function (v){
				return v.major.includes(str7)
			})
		}

		// 先让table为空
		oTbody.innerHTML = '';
		// 根据count和page准备要渲染的数据
		var renderArr = searchDate.slice((page - 1) * count, page * count);
		// 循环要渲染的数据
		for (var i = 0; i < renderArr.length; i++){
			// 创建tr
			var oTr = document.createElement('tr');
			// 给tr加内容
			oTr.innerHTML = `
				<td class="radio-box"><input type="checkbox" class="singleSelect" onchange="handleChange(this.checked, ${renderArr[i].id})"/></td>
				 <td>${renderArr[i].name}</td>
				 <td>${renderArr[i].number}</td>
				 <td>${renderArr[i].department}</td>
				 <td>${renderArr[i].position}</td>
				 <td>${renderArr[i].educationBJ}</td>
				 <td>${renderArr[i].educationSchool}</td>
				 <td>${renderArr[i].major}</td>
				 <td>${renderArr[i].startTime}</td>
				 <td>${renderArr[i].endTime}</td>
				 <td>${renderArr[i].educationType}</td>
				 <td>${renderArr[i].isDegree}</td>
				 <td>
						<div class="btn edit" style="color: #4F93F6" data-edit=${JSON.stringify(renderArr[i])}>编辑</div>
						<div class="btn lookSingle" style="color: #4F93F6" data-look=${JSON.stringify(renderArr[i])}>查看</div>
						<div onclick="deleteItem()" style="color: red" class="btn del" data-del=${JSON.stringify(renderArr[i])}>删除</div>
				 </td>
			`;
			// 把tr加到tbody中
			oTbody.appendChild(oTr);
		}
		oTbody.onclick = function () {
			// 点击编辑按钮时
			if(event.target.dataset.edit) {
				sessionStorage.setItem('editParams', event.target.dataset.edit);
				var url = location.href;
				url = url.substring(0,url.lastIndexOf("/"));
				window.location.href = `${url}/AddEducationExperience.html`
			}
			// 点击查看按钮时
			if(event.target.dataset.look) {
				sessionStorage.setItem('lookParams', event.target.dataset.look);
				var url = location.href;
				url = url.substring(0,url.lastIndexOf("/"));
				window.location.href = `${url}/EmployeeDetails.html`
			}
		}
		//渲染页码
		//找到所有的1，2，3，4的页码
		var aPageBtn = document.querySelectorAll('.pageBtn');
		//删除所有的页码
		for(var i=0;i<aPageBtn.length;i++){
			oPageContain.removeChild(aPageBtn[i].parentNode);
		}
		// 根据数据的长度重新创建页码
		for(var i = 1; i <= Math.ceil(searchDate.length / count); i++) {
			// 创建li
			var oLi = document.createElement('li');
			// 给li创建内容
			oLi.innerHTML = `<a class="pageBtn" href="#">${i}</a>`;
			// 如何li和当前的页码一致，给他加一个选中的class
			if(i === page) {
					oLi.classList.add('active');
			}
			// 在下一页的前面插入页码
			oPageContain.insertBefore(oLi, oPageContain.lastElementChild)
		}
}
// 刷新更改后的页面
render();
//给分页加事件
oPageContain.addEventListener('click', changePage);
function changePage() {
	//如果当前点击的按钮有pageBtn这个class名字
	if (event.target.className === 'pageBtn') {
		//修改全局的page
		page = event.target.innerText;
		//渲染table，渲染分页
		render();
	}
}
//给上一页和下一页加事件
oPreBtn.addEventListener('click',prev);
oNextBtn.addEventListener('click',next);
function prev(){
	if(page>1){
		page--;
		render();
	}
}
function next(){
	if(page<Math.ceil(data.length / count)){
		page++;
		render();
	}
}
// 点击跳转页面
function pageJump() {
	event.preventDefault();
	sessionStorage.removeItem('editParams');
	var url = location.href;
	url = url.substring(0,url.lastIndexOf("/"));
	window.location.href = `${url}/AddEducationExperience.html`;
}
addBtn.onclick = pageJump;

// 搜索
searchBtn.addEventListener('click',searchAllFn);
function searchAllFn() {
	event.preventDefault();
	event.cancelBubble = true;
	page = 1;
	render();
}
// 删除函数
function deleteItem(){
	// 原生button 会默认刷新网页，所以这里用event.preventDefault()阻止浏览器默认行为
	event.preventDefault();
	event.cancelBubble = true;
	if(event.target.parentNode.parentNode.children[0].children[0].checked){
		console.log(event.target.parentNode.parentNode.children[0].children[0].checked)
		$('#delModal').modal('show');
	}

}
var resetBtn = document.querySelector('.resetBtn');
resetBtn.onclick = function () {
	data = data.filter(function (item){
		return !selectedList.includes(item.id);
	})
	$('#delModal').modal('hide');
	upDataLocalstorage(data)
	render();
}



